import { getContextData } from "waku/middleware/context";
import { getState } from "@/lib/db";
import { startStudySession } from "@/actions/srs";
import StudySession from "@/components/Flashcard/StudySession";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import LessonSelector from "@/components/srs/LessonSelector";
import type { PageProps } from "waku/router";

// This is a server component that gets the initial data
export default async function StudyPage(props: PageProps<"/study/[slug]">) {
  const lessonId = props.slug;
  const ctx = getContextData() as any;
  const userId = ctx?.user?.id;
  // const state = getState(null);

  // If not logged in, show login required message
  if (!userId) {
    return (
      <div className="container mx-auto py-8">
        <Card className="p-6 text-center">
          <h1 className="text-2xl font-bold mb-4">Login Required</h1>
          <p className="mb-4">
            You need to be logged in to use the study session feature.
          </p>
          <Button asChild>
            <a href="/login">Login</a>
          </Button>
        </Card>
      </div>
    );
  }

  // If no lesson ID provided, show lesson selector

  // Get initial data for the study session

  return (
    <div className="container mx-auto py-8">
      <Inner userId={userId} lessonId={lessonId} />
    </div>
  );
}

async function Inner({
  userId,
  lessonId,
}: {
  userId: number;
  lessonId: string;
}) {
  return (
    <>
      {lessonId && Number(lessonId) ? (
        <StudySessionOuter userId={userId} lessonId={Number(lessonId)} />
      ) : (
        <LessonSelector userId={userId} />
      )}
    </>
  );
}
async function StudySessionOuter({
  userId,
  lessonId,
}: {
  userId: number;
  lessonId: number;
}) {
  const initialData = await startStudySession(userId, lessonId, true);
  console.log({ initialData });
  if ("ok" in initialData)
    return (
      <>
        <StudySession
          userId={userId}
          lessonId={lessonId}
          initialData={initialData.ok}
        />
      </>
    );
  else return <p>idk</p>;
}